<template>
  <div :style="{background: '#fff',padding:'10px'}">
    <ul class="board-scrum-stages" >
      <div class="scrum-stage " v-for="(card,index) in 1" :key="index">
        <div slot="title" >
          <Row>
            <Col span="19">
              <div contenteditable="true">启动</div>
            </Col>
            <Col span="5">
              <div class="zss_top">
               <Dropdown>
                  <a href="javascript:void(0)">
                      下拉菜单
                      <Icon type="arrow-down-b"></Icon>
                  </a>
                  <Dropdown-menu slot="list">
                      <Dropdown-item>内容一</Dropdown-item>
                      <Dropdown-item>内容二</Dropdown-item>
                  </Dropdown-menu>
              </Dropdown>
              </div>
            </Col>
          </Row>
        </div>
        <section>
          <div class="taskCard" v-for="i in 3" :key="i">
            <Col span="19">
            <p @click="showDetail" class="taskTitle">项目原型设计</p>
            </Col>
            <Col span="5">
              <p class="task_icontab">
                <div class="top">
                  <Tooltip content="责任人" placement="top">
                      <Avatar :style="{float:'right',top:'-5px'}" src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
                  </Tooltip>
                </div>
              </p>
            </Col>
            <Col span="24">
              <div class="top" style="display：block;float:left">
                <Tooltip content="收藏" placement="top">
                  <Icon type="ios-star-outline"></Icon>
                </Tooltip>
              </div>
            </Col>
          </div>
        </section>
        <i-button type="primary" size="large" @click="showDetail" long>添加</i-button>
      </div>
      <div class="scrum-stage " >
        <div slot="title" >
          <div contenteditable="true">新建</div>
        </div>
        <section>

        </section>
        <i-button type="primary" size="large" @click="showDetail" long>添加</i-button>
      </div>
    </ul>
    <Modal :width="800"
      v-model="modal1"
      title="任务详情">
      <Task></Task>
    </Modal>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  import Task from '@/manager/project/project/task'
  export default {
    name: 'test',
    data () {
      return {
        modal1 : false
      }
    },
    components:{
      Task
    },
    methods: {
      showDetail(){
        this.modal1 = true
        console.info(11)
      }
    }

  }
</script>
<style>
  .board-scrum-stages{
    position: relative;
    padding: 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 170px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
  .scrum-stage{
    position: relative;
    height: 100%;
    width: 288px;
    overflow-y: auto;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-right: 10px;
    vertical-align: top;
    background-color: #eee;
    border-radius: 3px;
    overflow: hidden;
    padding:10px;
  }
  .scrum-stage .scrum-stage-header, .scrum-stage .sort-header-placeholder{-webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    z-index: 1;
    transition: box-shadow 100ms ease;

  }
  .taskCard{
    border:0;
    background-color: white;
    width: 100%;
    height: 80px;
    padding:20px;
    margin:10px auto;
    border-radius: 5px;
    transition: all 0.3s;
  }
  .taskCard:hover{
    box-shadow: 0 3px 10px rgba(152, 152, 152, 0.5);
    cursor: pointer;
  }
  .taskTitle{
    float: left;
    color: black;
    font-size: 14px
  }
  .zss_top{
    position: relative;
    right:20px;
  }
</style>
